<template>
	<div class="layout-padding fillings-container">
		<HyTable
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			:searchConfig="searchConfig"
			:searchFields="searchFields"
			:searchDefault="searchDefault"
			:buttonConfig="buttonConfig"
			:type="tabs"
			:tabls="tabls"
			ref="hyTableRef"
			@handleClick="handleClick"
		>
			<template #timeSlot="{ row }">
				{{ row.checktime || row.CheckTime }}
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="80">
					<template #default="{ row }">
						<el-button text icon="View" type="primary" @click="showDetail(row)">查看</el-button>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router';
import HyTable from '/@/components/HyTable/index.vue';
import { checkDataList,operationList } from '/@/api/acceptance'
import { useDict } from '/@/hooks/dict';
export default defineComponent({
	name: 'acceptance',
	components: { HyTable },
	setup() {
		const { log_status:LOG_STATUS } = useDict('log_status')
		const router = useRouter();
		const tabs = ref('tabs');
		const tabls = computed(() => {
			return {
				type: 'card',
				tablesList: [
					{
						lable: '开发项目',
						name: 1,
					},
					{
						lable: '运维项目',
						name: 2,
					},
				],
			};
		});
		const tableColumns = [
			{ prop: 'app_code', label: '数字化应用编号'},
			{ prop: 'app_name', label: '数字化应用名称'},
			// { prop: 'domain', label: '所属领域',slot:'domainSlot' },
			{ prop: 'domainName', label: '所属领域'},
			{ prop: 'responsible_dept', label: '责任部门' },
			{ prop: 'time', label: '验收时间',slot:'timeSlot' },
			{ prop: 'log_status_name', label: '类型' },
		]
		const defaultData = ref([]);
		const isTab = ref(false); //控制操作项

		const tableConfig = computed(() => {
			return {
				request: isTab.value?operationList:checkDataList,
				showSearch: true,
				isCostomTop: false,
				title: '应用验收',
				defaultData: defaultData,
			};
		});
		const searchConfig = ref({
			labelWidth: '120px',
			span: 6,
			offset: 0,
			type: 'search',
			title: '应用验收',
			show: true,
		});
		// 配置搜索
		const searchFields = computed(() => {
			return {
				name: {
					type: 'input',
					label: '关键字',
					span: 8,
					placeholder: '请输入关键字进行模糊搜索',
				},
				logStatus: {
					type: 'select',
					label: '状态',
					span: 8,
					placeholder: '请选择状态',
					options: LOG_STATUS.value,
				},
				timeArr:{
					type: 'date',
					span: 8,
					picker: 'datetimerange',
					label: '验收时间',
				}
			};
		});
		const searchDefault = ref({});
		const buttonConfig = computed(() => {
			return {
				span: 6,
				offset: 2,
			};
		});

		const hyTableRef = ref(null)
		const handleClick = (tab: TabsPaneContext) => {
			console.log(tab)
			switch (tab) {
				case 2:
					isTab.value = true;
					defaultData.value = []
					break;

				default:
					isTab.value = false;
					defaultData.value = []
					break;
			}
			nextTick(()=>{
				hyTableRef.value.getTableData()
			})
		};
		//详情
		const showDetail = (row?: any) => {
			router.push({
				path: '../detail/acceptance',
				query:{
          id:row.declare_id,
					implementationId:row.implementation_id,
					pageType:1,
					tagsViewName:'应用验收详情'
				}
			});
		};
		return {
			tabs,
			tabls,
			tableColumns,
			tableConfig,
			searchFields,
			searchConfig,
			searchDefault,
			buttonConfig,
			isTab,
			hyTableRef,
			handleClick,
			showDetail,
		};
	},
});
</script>

<style scoped lang="scss">
.fillings-container {
	height: auto;
}
</style>